<template>
  <div class="home">
    <van-tabs v-model="active">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <ArticleList :channel="item" @show-more="handleShowMore" />
      </van-tab>
    </van-tabs>

    <!-- 频道列表开关 通过定位 -->
    <div class="bar-btn" @click="handleShowChannelEdit">
      <van-icon name="wap-nav" />
    </div>

    <!-- 弹出层举报 -->
    <van-popup v-model="isShow" :style="{ width: '80%' }">
      <MoreAction ref="moreAction" @dislike="dislike" @report="report" />
    </van-popup>

    <!-- 弹出层频道 -->
    <van-action-sheet v-model="showChannelEdit" title="标题">
      <ChannelEdit
        ref="channelEdit"
        :active="active"
        @update-current="updateCurrent"
        @update-active="updateActive"
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { reqDisLikeArticle, reqReportArticle } from '@/api/article'
import ArticleList from './components/articleList.vue'
import MoreAction from './components/moreAction.vue'
import ChannelEdit from './components/channelEdit.vue'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'Home',

  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },

  data() {
    return {
      active: 0,
      isShow: false,
      articleId: null,
      showChannelEdit: false
    }
  },

  computed: {
    ...mapState('channels', ['channels'])
  },

  created() {
    this.getChannelsAsync()
  },

  methods: {
    ...mapActions('channels', ['getChannelsAsync']),

    // 点击显示弹出层举报
    handleShowMore(id) {
      this.isShow = true
      this.articleId = id
      this.$nextTick(() => {
        this.$refs.moreAction.isReport = false
      })
    },

    // 点击显示弹出层频道
    handleShowChannelEdit() {
      this.showChannelEdit = true
      this.$nextTick(() => {
        this.$refs.channelEdit.isEditing = false
      })
    },

    // 标记不喜欢
    async dislike() {
      // 发送请求
      await reqDisLikeArticle(this.articleId)
      // 提示
      this.$toast.success('操作成功')
      // 关闭弹出层
      this.isShow = false
      // 删除对应项
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }
      this.$eventBus.$emit('del-article', eventObj)
    },

    // 举报文章
    async report(type) {
      // 发送请求
      await reqReportArticle(this.articleId, type)
      // 提示
      this.$toast.success('举报成功')
      // 关闭弹出层
      this.isShow = false
      // 删除对应项
      const eventObj = {
        articleId: this.articleId,
        channelId: this.channels[this.active].id
      }
      this.$eventBus.$emit('del-article', eventObj)
    },

    // 点击我的频道，切换频道
    updateCurrent(index) {
      this.active = index
      this.showChannelEdit = false
    },

    // 修改高亮 bug
    updateActive(active) {
      this.active = active
    }

  }

}
</script>

<style lang="scss" scoped>
// 加了scoped, 样式, 只会作用于当前组件模板
// 深度作用选择器 ::v-deep (sass)  /deep/ (less)  >>> (css)
.home {
  height: 100vh;
  padding-top: 90px;
  padding-bottom: 50px;
  box-sizing: border-box;

  .van-popup {
    border-radius: 5px;
  }

  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }

  ::v-deep {
    .van-tabs__line {
    background-color: #3196fa;
    }

    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 30px;
      top: 46px;
    }

    .van-tabs {
      height: 100%;
      .van-tabs__content {
        height: 100%;
        .van-tab__pane {
          height: 100%;
          overflow: auto;
        }
      }
    }
  }
}
</style>
